<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        }

        body {
            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
            color: #fff;
            min-height: 100vh;
            padding: 0;
            overflow-x: hidden;
        }

        .container {
            width: 100%;
            margin: 0 auto;
            background: rgba(0, 0, 0, 0.7);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }

        h1 {
            font-size: 1.5rem;
            margin-bottom: 5px;
            background: linear-gradient(to right, #ff8a00, #da1b60);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .main-content {
            display: flex;
            flex-direction: column;
            padding: 15px;
            flex: 1;
        }

        .player-section {
            order: 1;
            margin-bottom: 0px;
        }

        .channel-list {
            order: 2;
            background: rgba(20, 20, 30, 0.8);
            border-radius: 12px;
            padding: 10px;
            flex: 1;
        }

        .video-container {
            background: #000;
            border-radius: 12px;
            overflow: hidden;
            margin-bottom: 5px;
            position: relative;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        }

        #video-player {
            width: 100%;
            height: 200px;
            display: block;
        }

        .channel-info {
            background: rgba(20, 20, 30, 0.8);
            border-radius: 12px;
            padding: 10px;
            margin-bottom: 5px;
        }

        .channel-info h2 {
            font-size: 1.1rem;
            margin-bottom: 10px;
            padding-bottom: 8px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .channel-details {
            font-size: 0.85rem;
            color: #ccc;
            line-height: 1.4;
            display: flex;
            justify-content: space-between;
        }

        .channel-details p {
            margin-bottom: 8px;
            word-break: break-all;
        }

        .status {
            padding: 10px;
            border-radius: 8px;
            background: rgba(0, 0, 0, 0.4);
            font-size: 0.85rem;
            text-align: center;
        }

        .search-box {
            display: flex;
            margin-bottom: 5px;
            position: sticky;
            top: 0;
            background: rgba(20, 20, 30, 0.95);
            padding: 10px;
            border-radius: 12px;
            padding-top: 0px;
            padding-bottom: 0px;
            z-index: 10;
        }

        .search-box input {
            flex: 1;
            padding: 12px;
            border-radius: 25px 0 0 25px;
            border: none;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 16px;
            outline: none;
        }

        .search-box button {
            padding: 12px 20px;
            border-radius: 0 25px 25px 0;
            border: none;
            background: linear-gradient(to right, #ff8a00, #da1b60);
            color: white;
            cursor: pointer;
        }

        .filter-group {
            margin-bottom: 5px;
        }

        .filter-group select {
            width: 100%;
            padding: 12px;
            border-radius: 25px;
            border: none;
            background: rgba(0, 0, 0, 0.6);
            color: white;
            font-size: 16px;
            appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px;
        }

        .channels {
            max-height: 300px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
        }

        .channel-item {
            padding: 12px;
            border-radius: 10px;
            margin-bottom: 8px;
            background: rgba(255, 255, 255, 0.05);
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            justify-content: space-between;
        }

        .channel-item:active {
            background: rgba(255, 255, 255, 0.1);
            transform: scale(0.98);
        }

        .channel-item.active {
            background: linear-gradient(to right, #ff8a00, #da1b60);
            color: white;
        }

        .channel-item h3 {
            font-size: 0.95rem;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .channel-item p {
            font-size: 0.8rem;
            color: #aaa;
        }

        .loading {
            text-align: center;
            padding: 20px;
            color: #ccc;
        }

        .loading i {
            font-size: 2rem;
            margin-bottom: 10px;
            color: #ff8a00;
        }

        /* 触摸友好的滚动条 */
        .channels::-webkit-scrollbar {
            width: 5px;
        }

        .channels::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.05);
            border-radius: 10px;
        }

        .channels::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 10px;
        }

        .channels::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.3);
        }

        /* 响应式调整 */
        @media (min-width: 768px) and (orientation: landscape) {
            #video-player {
                height: 250px;
            }

            .channels {
                max-height: 200px;
            }
        }

        @media (min-width: 1024px) {
            .container {
                max-width: 100%;
            }

            #video-player {
                height: 280px;
            }

            .channels {
                max-height: 350px;
            }
        }

        /* 防止iOS缩放 */
        input,
        select,
        textarea {
            font-size: 16px !important;
        }

        /* 动画效果 */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

        .channel-item {
            animation: fadeIn 0.3s ease;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="main-content">
            <div class="player-section">
                <div class="video-container">
                    <video id="video-player" controls autoplay></video>
                </div>

                <div class="channel-info">
                    <div class="channel-details" id="channel-details">
                        <p>选择下方频道查看详细信息并播放</p>
                    </div>
                    <div class="status" id="player-status">
                        播放器就绪
                    </div>
                </div>
            </div>

            <div class="channel-list">
                <div class="search-box">
                    <input type="text" id="search-input" placeholder="搜索频道...">
                    <button id="search-btn">搜索</button>
                </div>

                <div class="filter-group">
                    <select id="group-filter">
                        <option value="">所有分组</option>
                        <!-- 分组选项将由JavaScript生成 -->
                    </select>
                </div>

                <div class="channels" id="channels-list">
                    <div class="loading">
                        <p>正在加载频道列表...</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="./hls-1.6.7.min.js"></script>
    <script src="./index.js"></script>
    <script>
        document.addEventListener('plusready', function () {
            const searchInput = document.getElementById('search-input');
            const searchBtn = document.getElementById('search-btn');
            const groupFilter = document.getElementById('group-filter');
            const channelsList = document.getElementById('channels-list');
            const channelDetails = document.getElementById('channel-details');
            const playerStatus = document.getElementById('player-status');
            const video = document.getElementById('video-player');
            let filteredChannels = [];
            let groups = [...new Set(channels.map(channel => channel.group))];

            playerStatus.textContent = '播放列表加载成功';
            playerStatus.style.color = '#4caf50';

            const hls = new Hls();
            hls.attachMedia(video);

            video.addEventListener('fullscreenchange', handleFullScreen);
            video.addEventListener('webkitfullscreenchange', handleFullScreen);

            function handleFullScreen() {
                if (video.webkitDisplayingFullscreen) {
                    plus.screen.lockOrientation("landscape");
                } else {
                    plus.screen.lockOrientation("portrait-primary");
                }
            }

            // 更新分组筛选器
            updateGroupFilter();

            // 显示所有频道
            filterChannels();


            // 更新分组筛选器
            function updateGroupFilter() {
                groupFilter.innerHTML = '<option value="">所有分组</option>';

                const sortedGroups = Array.from(groups).sort();
                for (let group of sortedGroups) {
                    const option = document.createElement('option');
                    option.value = group;
                    option.textContent = group;
                    groupFilter.appendChild(option);
                }
            }

            // 筛选频道
            function filterChannels() {
                const searchText = searchInput.value.toLowerCase();
                const selectedGroup = groupFilter.value;

                filteredChannels = channels.filter(channel => {
                    const matchesSearch = channel.name.toLowerCase().includes(searchText);
                    const matchesGroup = !selectedGroup || channel.group === selectedGroup;
                    return matchesSearch && matchesGroup;
                });

                displayChannels();
            }

            // 显示频道列表
            function displayChannels() {
                channelsList.innerHTML = '';

                if (filteredChannels.length === 0) {
                    channelsList.innerHTML = '<div class="loading"><p>没有找到匹配的频道</p></div>';
                    return;
                }

                for (let i = 0; i < filteredChannels.length; i++) {
                    const channel = filteredChannels[i];

                    const item = document.createElement('div');
                    item.className = 'channel-item';
                    item.innerHTML = `
                        <h3>${channel.name}</h3>
                        <p>分组: ${channel.group}</p>
                    `;

                    item.addEventListener('click', () => {
                        playChannel(channel);

                        // 移除之前的高亮
                        document.querySelectorAll('.channel-item').forEach(el => {
                            el.classList.remove('active');
                        });

                        // 高亮当前频道
                        item.classList.add('active');

                        // 平滑滚动到播放器
                        document.querySelector('.player-section').scrollIntoView({
                            behavior: 'smooth',
                            block: 'start'
                        });
                    });

                    channelsList.appendChild(item);
                    if(i==0){
                        item.click();
                    }
                }

            }

            // 播放频道
            function playChannel(channel) {
                playerStatus.textContent = '正在加载频道...';
                playerStatus.style.color = '#ff8a00';

                // 更新频道信息
                channelDetails.innerHTML = `
                    <p><strong>频道名称:</strong> ${channel.name}</p>
                    <p><strong>分组:</strong> ${channel.group}</p>
                `;

                hls.loadSource(channel.url);
                playerStatus.textContent = '播放中';
                playerStatus.style.color = '#4caf50';
            }

            // 搜索功能
            searchBtn.addEventListener('click', filterChannels);

            // 分组筛选
            groupFilter.addEventListener('change', filterChannels);

        });
    </script>
</body>

</html>